<template>
  <div class="activeDetail fixed bottom-0 left-0 right-0 top-0 h-100% overflow-y-auto" style="background: linear-gradient(180deg, #FFF 0%, #F5F5F5 100%);">
    <div class="sticky left-0 right-0 top-0 z-999">
      <div class="relative">
        <div class="z-999 flex items-center justify-between px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <span class="text-center text-36rpx font-600">赠品活动详情</span>
          <div class="text-hex-fff">111</div>
        </div>
      </div>
    </div>
    <div class="mt-32rpx px-32rpx">
      <div class="mb-16rpx text-28rpx font-bold text-hex-333333">下单即送赠品</div>
      <div class="mb-12rpx text-24rpx text-hex-7C8699">有效时间：{{ activeStore.activeTime }}</div>
      <div class="mb-70rpx text-24rpx font-bold text-hex-7c8699">使用规则：{{ activeStore.activeDec }}</div>
      <div>
        <div v-if="activeStore.activeProductList.length>0">
          <div
            v-for="item in activeStore.activeProductList"
            :class="{ activeClass: item.spuId===activeStore.currentSelectActive.spuId }"
            class="boxshadow relative mb-32rpx box-border border-2rpx border-transparent rounded-24rpx border-solid p-32rpx"
            @click="checkProduct(item)">
            <div class="flex">
              <div class="h-128rpx w-128rpx flex items-center justify-center bg-hex-F5F3F0">
                <image
                  :src="item.productImage"
                  mode="scaleToFill"
                  class="h-90rpx w-96rpx"
                />
              </div>
              <div class="font-blod ml-22rpx text-28rpx text-hex-333">{{ item.productSkuName }}</div>
            </div>
            <div v-if="item.spuId===activeStore.currentSelectActive.spuId" class="absolute right-0 top-0">
              <image
                :src="`${cdnUrl}/imgs/shop/select.png`"
                mode="scaleToFill"
                class="h-48rpx w-48rpx"
              />
            </div>
          </div>
        </div>
        <div v-if="activeStore.activeProductList.length===0">
          <div class="mt-230rpx flex flex-col items-center">
            <div class="image">
              <image
                :src="`${cdnUrl}/imgs/noOpen/noText.png${imgVersion}`"
                mode="scaleToFill"
                class="h-364rpx w-364rpx"
              />
            </div>
            <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无商品</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useActiveStore } from '@/stores/active'

let activeStore: any = useActiveStore()
let searchBarTop: any = $ref('24')
onLoad((options) => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
  let tempImgList: any = []
  tempImgList.push(activeStore.currentSelectActive.productImage)
  activeStore.updateGiftsImgList(tempImgList)
}

const checkProduct = (item) => {
  activeStore.updateCurrentSelectActive(item)
  let tempImgList: any = []
  tempImgList.push(item.productImage)
  activeStore.updateGiftsImgList(tempImgList)
  uni.navigateBack({
    delta: 1,
  })
}

let productList: any = $ref([])


onMounted(() => {

})

</script>

<style lang='scss' scoped>
.activeDetail{
  .boxshadow{
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgb(0 0 0 / 5%);
  }

  .activeClass{
    box-shadow: 0rpx 8rpx 24rpx 0rpx rgb(0 0 0 / 12%);
    border: 2rpx solid #ABCD05;
    background: #FFF;
  }

}
</style>
